<template>
  <div class="disclaimer view-container">
    <t-dialog
      v-model:visible="formVisible"
      :close-btn="false"
      :close-on-esc-keydown="false"
      :header="false"
      :close-on-overlay-click="false"
      :confirm-btn="'登录'"
      :cancel-btn="'退出'"
      :on-confirm="confirmEvent"
      :on-close="cancelEvent"
      placement="center"
      width="480px"
    >
      <div class="privacy-policy">
        <div class="header">视频分析软件</div>
        <div class="main-content">
          <div class="form-content">
            <el-form ref="formRef" :model="state" :rules="state.rules" hide-required-asterisk label-position="top">
              <el-form-item prop="username">
                <el-input v-model="state.username" placeholder="用户名" class="form-input"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="state.password" placeholder="密码" class="form-input" type="password"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </t-dialog>
  </div>
</template>
<script setup lang="ts">
import { MessagePlugin } from 'tdesign-vue-next';
import { reactive, unref, ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { login } from '@renderer/src/utils/ipc';
import { userSystemStore } from '@/store';
import router from '@renderer/src/router';
import { useEventBus } from '@vueuse/core';
import { init, login as loginVideo } from '@/utils/webVideoCtrl';

const emitLogin = useEventBus<string>('login');

const systemStore = userSystemStore();

const formRef = ref();

const state = reactive({
  username: 'admin',
  password: '',
  rules: {
    username: { required: true, message: '请输入用户名', tirgger: 'blur' },
    password: { required: true, message: '请输入密码', tirgger: 'blur' },
  },
});

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});
const formVisible = ref(false);
const emit = defineEmits(['update:visible']);

watch(
  () => formVisible.value,
  (val) => {
    emit('update:visible', val);
  },
);
watch(
  () => props.visible,
  (val) => {
    formVisible.value = val;
  },
);

const confirmEvent = () => {
  let valid = true;
  try {
    unref(formRef).validate();
  } catch (err) {
    console.log(err);
    valid = false;
  }
  if (!valid) return;
  const rest = login({ name: state.username, password: state.password }); //调用登录接口
  rest.then(async (res) => {
    if (res.length > 0) {
      systemStore.login(res[0]);
      formVisible.value = false;
      emitLogin.emit('login');
      void router.push({ path: '/realTimeMonitor' });
    } else {
      MessagePlugin.error('登录失败');
    }
  });
};

//录制与编辑
const initPlugin = () => {
  if (!systemStore.$state.loginFlag) {
    return;
  }
};

const cancelEvent = () => {
  MessagePlugin.warning({ content: '5秒后自动退出！', duration: 5000 });
  setTimeout(() => {
    window.electron.ipcRenderer.send('quit-app');
  }, 5000);
};
</script>

<style lang="less" scoped>
.view-container {
  :deep(.t-dialog) {
    .t-dialog__footer {
      display: flex;
      justify-content: space-around;

      .t-button {
        width: 180px;
        height: 45px;
        border-radius: 25px;
        font-weight: 700;
        font-size: 15px;
        line-height: 45px;
      }
    }
  }

  .privacy-policy {
    opacity: 1;

    .header {
      margin-top: 45px;
      font-weight: 700;
      font-size: 28px;
      text-align: center;
      color: var(--td-text-color-primary);
      display: block;
    }

    .main-content {
      height: 280px;
      margin: 15px auto 10px;
      overflow-y: auto;
    }
  }

  :deep(.md-editor-preview-wrapper) {
    padding: 0;

    .md-editor-preview {
      color: var(--td-text-color-primary);

      blockquote {
        margin: 0;
      }

      p,
      li {
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
      }
    }
  }

  .form-content {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border-radius: 50px;
    align-items: center;
    .form-input {
      padding: 5px;
      width: 250px;
      height: 48px;
      overflow: hidden;
    }
    .submit {
      display: flex;
      justify-content: center;
      padding: 5px;
      height: 200px;
      .submit-login {
        width: 240px;
        height: 58px;
        border-radius: 50px;

        font-weight: 500;
        font-size: 20px;
        color: #fff;
        line-height: 24px;
        text-align: center;
        font-style: normal;
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          letter-spacing: 1cm;
          margin-left: 14px;
        }
      }
    }
  }
}
</style>
